<template>
    <div class="cart_item">
      <div class="cart_column column_1">
        <el-checkbox class="my_el_checkbox" v-model="data.selected"></el-checkbox>
      </div>
      <div class="cart_column column_2">
        <img :src="data.course_img" alt="">
        <span><router-link :to="'/coursedetail/'+data.id">{{data.name}}</router-link></span>
      </div>
      <div class="cart_column column_3">
        <el-select v-model="expire" size="mini" placeholder="请选择购买有效期" class="my_el_select">
          <el-option v-for="expires,index in data.expire_list" :key="index" :label="expires.expire_text" :value="expires.expire_time" ></el-option>
        </el-select>
      </div>
      <div class="cart_column column_4">¥{{data.real_price}}</div>
      <div class="cart_column column_4" @click="del_cart" style="cursor:pointer">删除</div>
    </div>
</template>

<script>
export default {
    name: "CartItem",
    data(){
      return {
        expire:parseInt(this.data.expire),
      }
    },
    props:['data',],
    watch:{
      'data.selected':function(){
        let token = localStorage.getItem('token');
        if(!token){
        token = sessionStorage.getItem('token');
        };
        let selected=this.data.selected;
        this.$axios.patch(`${this.$settings.Host}/cart/`, {selected:selected, course_id:this.data.id}, {headers:{'Authorization':'jwt '+token}})
        .then(res=>{this.data.selected=selected;this.$emit('change_select');})
        .catch(error=>{})
      },
      'expire':function(){
        let token = localStorage.getItem('token') || sessionStorage.getItem('token');
        let expire_time = this.expire;
        let course_id = this.data.id;
        this.$axios.put(`${this.$settings.Host}/cart/`, {expire_time:expire_time, course_id:course_id}, {headers:{'Authorization':'jwt '+token}})
        .then(res=>{this.data.real_price=res.data.real_price;this.$emit('change_select')})
        .catch(error=>{})
      }
    },
    methods:{
      del_cart(){
        let token = localStorage.getItem('token') || sessionStorage.getItem('token');
        let course_id = this.data.id;
        this.$axios.post(`${this.$settings.Host}/cart/del/`,{course_id:course_id}, {headers:{'Authorization':'jwt '+token}})
        .then(res=>{this.$emit('del_course');this.$message.success(res.data.message);})
        .catch(error=>{})
      }
    }
}
</script>

<style scoped>
  /*.cart_item{*/
  /*  height: 100px;*/
  /*}*/
.cart_item::after{
  content: "";
  display: block;
  clear: both;
}
.cart_column{
  float: left;
  height: 150px;
  display: flex;
  align-items: center;
}
.cart_item .column_1{
  width: 88px;
  position: relative;
}
.my_el_checkbox{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  width: 16px;
  height: 16px;
}
.cart_item .column_2 {
  /*padding: 67px 10px;*/
  width: 520px;
  /*height: 116px;*/
}
.cart_item .column_2 img{
  width: 175px;
  /*height: 115px;*/
  margin-right: 35px;
  /*vertical-align: middle;*/
}
.cart_item .column_3{
  width: 197px;
  position: relative;
  padding-left: 10px;
}
.my_el_select{
  width: 117px;
  height: 28px;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}
.cart_item .column_4{
  /*padding: 67px 10px;*/
  /*height: 116px;*/
  width: 142px;
  /*line-height: 116px;*/
}

</style>
